<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>Configuration, methods and events of Kendo UI Popup</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Easy to follow steps guide how to quickly configure Popup UI widget.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/popup.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/popup.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouipopup"><a href="#kendouipopup">kendo.ui.Popup</a></h1>

<p>Represents the Kendo UI Popup widget. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-adjustSize">
<a href="#configuration-adjustSize">adjustSize </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the margins, which will be added to the popup size, if its position should end up being next to the viewport edges. By default, the adjustment amount in both dimensions is zero.</p>

<p>The property takes effect only if <a href="#configuration-collision"><code>collision</code></a> is set to <code>"fit"</code> for the respective dimension (<code>width</code> or <code>height</code>).</p>

<pre><code>&lt;div style="height:500px;"&gt;&amp;nbsp;&lt;/div&gt;
&lt;p style="text-align:right;"&gt;&lt;input id="datepicker" /&gt;&lt;/p&gt;

&lt;div id="popup"&gt;popup that is 100px offset from the bottom-right edge of the page.&lt;/div&gt;

&lt;script&gt;
  $("#popup").kendoPopup({
    anchor: $("#datepicker"),
    origin: "bottom right",
    position: "top right",
    collision: "fit",
    adjustSize: {
        width: 100,
        height: 100
    }
  }).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation">
<a href="#configuration-animation">animation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Configures the opening and closing animations of the popup. Setting the <code>animation</code> option to <code>false</code> will disable the opening and closing animations. As a result the popup will open and close instantly.</p>

<p><code>animation:true</code> is not a valid configuration.</p>

<h4>Example - disable open and close animations</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
  animation: false
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h4>Example - configure the animation</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
  animation: {
   close: {
     effects: "fadeOut zoom:out",
     duration: 300
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  }
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close">
<a href="#configuration-animation.close">animation.close </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation played when the popup is closed.</p>

<h4>Example - configure the close animation</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
  animation: {
   close: {
     effects: "zoom:out",
     duration: 300
   }
  }
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close.effects">
<a href="#configuration-animation.close.effects">animation.close.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The effect(s) to use when playing the close animation. Multiple effects should be separated with a space.</p>

<p><a href="/api/javascript/effects/common">Complete list of available animations</a></p>

<h3 id="configuration-animation.close.duration">
<a href="#configuration-animation.close.duration">animation.close.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The duration of the close animation in milliseconds.</p>

<h3 id="configuration-animation.open">
<a href="#configuration-animation.open">animation.open </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation played when the calendar popup is opened.</p>

<h4>Example - configure the open animation</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
  animation: {
   open: {
     effects: "zoom:in",
     duration: 300
   }
  }
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open.effects">
<a href="#configuration-animation.open.effects">animation.open.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.</p>

<p><a href="/api/javascript/effects/common">Complete list of available animations</a></p>

<h3 id="configuration-animation.open.duration">
<a href="#configuration-animation.open.duration">animation.open.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The duration of the open animation in milliseconds.</p>

<h3 id="configuration-anchor">
<a href="#configuration-anchor">anchor </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h3>

<p>Specifies the element that will be used as an anchor. The widget will open next to that element.</p>

<h4>Example - specify an anchor</h4>

<pre><code>&lt;input id="datepicker" /&gt;
&lt;div id="popup"&gt;CONTENT&lt;/div&gt;

&lt;script&gt;
    $("#popup").kendoPopup({
        anchor: $("#datepicker")
    }).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-appendTo">
<a href="#configuration-appendTo">appendTo </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a><em>(default: document.body)</em>
</h3>

<p>Which element the popup will be appended to. The element needs to be relatively positioned.</p>

<h4>Example - append to different element</h4>

<pre><code>&lt;input id="datepicker" /&gt;
&lt;div id="container" style="position: relative"&gt;&lt;/div&gt;

&lt;div id="popup"&gt;CONTENT&lt;/div&gt;

&lt;script&gt;
    $("#popup").kendoPopup({
        anchor: $("#datepicker"),
        appendTo: $("#container")
    }).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-collision">
<a href="#configuration-collision">collision </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "fit flip")</em>
</h3>

<p>Configures how the popup should behave when it cannot be properly displayed and fully visible, if its <code>origin</code> and <code>position</code> settings are obeyed.</p>

<p>Valid values are: <code>"fit"</code>, <code>"flip"</code>, <code>"flip fit"</code> and <code>"fit flip"</code>. "Fit" allows the popup to be shifted (moved) until it is fully visible. "Flip" allows the popup to switch its position, according to its anchor. If two words are used, the first one applies to the horizontal dimension and the second one - to the vertical dimension. If one word is used, the setting is applied to both dimensions.</p>

<pre><code>&lt;div style="height:500px;"&gt;&amp;nbsp;&lt;/div&gt;
&lt;p style="text-align:right;"&gt;&lt;input id="datepicker" /&gt;&lt;/p&gt;

&lt;div id="popup" style="width: 100px; height: 100px;"&gt;popup content&lt;/div&gt;

&lt;script&gt;
  $("#popup").kendoPopup({
    anchor: $("#datepicker"),
    origin: "bottom right",
    position: "top right",
    collision: "fit flip"
  }).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-origin">
<a href="#configuration-origin">origin </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "bottom left")</em>
</h3>

<p>Specifies how to position the popup element based on anchor point. The value is
space separated "y" plus "x" position.</p>

<p>The available "y" positions are:</p>

<ul>
<li>"bottom"</li>
<li>"center"</li>
<li>"top"</li>
</ul>

<p>The available "x" positions are:</p>

<ul>
<li>"left"</li>
<li>"center"</li>
<li>"right"</li>
</ul>

<h4>Example - position the popup on top of the anchor</h4>

<pre><code>&lt;input id="datepicker" /&gt;
&lt;div id="popup"&gt;CONTENT&lt;/div&gt;

&lt;script&gt;
    $("#popup").kendoPopup({
        anchor: $("#datepicker"),
        origin: "top left"
    }).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position">
<a href="#configuration-position">position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "top left")</em>
</h3>

<p>Specifies which point of the popup element to attach to the anchor's origin point. The value is
space separated "y" plus "x" position.</p>

<p>The available "y" positions are:</p>

<ul>
<li>"bottom"</li>
<li>"center"</li>
<li>"top"</li>
</ul>

<p>The available "x" positions are:</p>

<ul>
<li>"left"</li>
<li>"center"</li>
<li>"right"</li>
</ul>

<h4>Example - position the popup on top of the anchor</h4>

<pre><code>&lt;input id="datepicker" /&gt;
&lt;div id="popup"&gt;CONTENT&lt;/div&gt;

&lt;script&gt;
    $("#popup").kendoPopup({
        anchor: $("#datepicker"),
        position: "bottom left"
    }).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-close"><a href="#methods-close">close</a></h3>

<p>Closes the popup.</p>

<h4>Example</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;button id="close"&gt;Close&lt;/button&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");
popup.open();

$("#close").click(function() {
    popup.close();
});
&lt;/script&gt;
</code></pre>

<h3 id="methods-open"><a href="#methods-open">open</a></h3>

<p>Opens the popup.</p>

<h4>Example</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;button id="open"&gt;Open&lt;/button&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

$("#open").click(function() {
    popup.open();
});
&lt;/script&gt;
</code></pre>

<h3 id="methods-position"><a href="#methods-position">position</a></h3>

<p>Re-positions the popup element</p>

<h4>Example</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

popup.open();
popup.position();
&lt;/script&gt;
</code></pre>

<h3 id="methods-setOptions"><a href="#methods-setOptions">setOptions</a></h3>

<p>Changes the initial Popup configuration.</p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The new configuration options.</p>

<h4>Example</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

popup.setOptions({
    origin: "top left",
    position: "bottom left"
});

popup.open();
&lt;/script&gt;
</code></pre>

<h3 id="methods-visible"><a href="#methods-visible">visible</a></h3>

<p>Checks whether the popup is visible</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> True when the popup is visible</p>

<h4>Example</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

alert(popup.visible());
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-activate"><a href="#events-activate">activate</a></h3>

<p>Fires when the popup is opened</p>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.ui.Popup</code>
</h5>

<p>The widget instance which fired the event.</p>

<h4>Example - subscribe to the "activate" event during initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
    activate: function(e) {
        console.log(e.sender.element[0]);
    }
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "activate" event after initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

popup.bind("activate", function(e) {
    console.log(e.sender.element[0]);
});

popup.open();
&lt;/script&gt;
</code></pre>

<h3 id="events-close"><a href="#events-close">close</a></h3>

<p>Fires when the popup closes</p>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.ui.Popup</code>
</h5>

<p>The widget instance which fired the event.</p>

<h4>Example - subscribe to the "close" event during initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
    close: function(e) {
        e.preventDefault(); //prevent popup closing
    }
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "close" event after initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

popup.bind("close", function(e) {
    e.preventDefault(); //prevent popup closing
});

popup.open();
&lt;/script&gt;
</code></pre>

<h3 id="events-deactivate"><a href="#events-deactivate">deactivate</a></h3>

<p>Fires when the popup is closed</p>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.ui.Popup</code>
</h5>

<p>The widget instance which fired the event.</p>

<h4>Example - subscribe to the "deactivate" event during initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
    deactivate: function(e) {
        console.log(e.sender.element[0]);
    }
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "deactivate" event after initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

popup.bind("deactivate", function(e) {
    console.log(e.sender.element[0]);
});

popup.open();
&lt;/script&gt;
</code></pre>

<h3 id="events-open"><a href="#events-open">open</a></h3>

<p>Fires when the popup opens</p>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.ui.Popup</code>
</h5>

<p>The widget instance which fired the event.</p>

<h4>Example - subscribe to the "open" event during initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup({
    open: function(e) {
        e.preventDefault(); //prevent popup opening
    }
}).data("kendoPopup").open();
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "open" event after initialization</h4>

<pre><code>&lt;div id="popup"&gt;CONTENT&lt;/div&gt;
&lt;script&gt;
$("#popup").kendoPopup();

var popup = $("#popup").data("kendoPopup");

popup.bind("open", function(e) {
    e.preventDefault(); //prevent popup opening
});

popup.open();
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

